import React, { Component } from 'react';
import { NavBar, Empty } from 'antd-mobile'
import * as service from '../api/index'
import '../styles/Collection.scss'
class Collection extends Component {
    constructor(props) {
        super(props)
        this.state = {
            allorderlist: JSON.parse(localStorage.getItem('soucang')),
            xianshilist: []
        }
    }
    componentDidMount() {
        var arr = this.state.xianshilist
        this.state.allorderlist && this.state.allorderlist.forEach(async (item, index) => {
            var res = await service.pro_detail(item)
            arr.push(res.data.data)
            this.setState({ xianshilist: arr }, () => {
                console.log(this.state.xianshilist)
            })
        })

    }
    goDetail(proid){//去详情页面
        this.props.history.push({pathname:'/detail',state:{id:proid}})
    }
    back() {
       this.props.history.push('/index/personalcenter')
    }
    render() {
        return (
            <div className='Collection' >
                <div className='header' >
                    <div className="top">
                        <NavBar onBack={() => { this.back() }}>收藏列表</NavBar>
                    </div>
                </div>
                <div className="tabs">
                    {
                        this.state.xianshilist && this.state.xianshilist.length != 0 ?
                            <div className="searchResult_main">
                                {
                                    this.state.xianshilist.map((item, index) => {
                                        return (
                                            <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                <div className="left">
                                                    <img src={item.img1} alt="" />
                                                </div>
                                                <div className="right">
                                                    <div className="name">{item.proname}</div>
                                                    <div className='time' >{item.time}</div>
                                                    <div className="Price">￥{item.originprice}</div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            :
                            <div className="nothing">
                                <Empty description='没有搜索到商品'
                                    style={{ padding: '64px 0', backgroundColor: 'white' }}
                                    imageStyle={{ width: 128 }}
                                />
                            </div>
                    }
                </div>
            </div>
        );
    }
}

export default Collection;